<template>
  <!-- eslint-disable vue/no-v-html -->
  <n-space vertical :size="16">
    <div ref="markText" v-html="getHtmlData" class="markdown-viewer"></div>
  </n-space>
</template>

<script lang="ts" setup name="MarkdownViewer">
import { computed, onUpdated, ref } from 'vue';
import showdown from 'showdown';
import hljs from 'highlight.js';
// import 'highlight.js/styles/androidstudio.css';

const markText = ref();

const converter = new showdown.Converter();
converter.setOption('tables', true);
const props = defineProps({
  value: { type: String },
  class: { type: String },
});
const getHtmlData = computed(() => converter.makeHtml(props.value || ''));

const highlightCode = () => {
  const preEl = markText.value.querySelectorAll('pre');
  preEl.forEach((el) => {
    hljs.highlightBlock(el);
  });
};
onUpdated(() => {
  highlightCode();
});
</script>

<style scoped>
.markdown-viewer {
  width: 100%;
}
</style>
